<template>
  <a-modal
    title="选择产品"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    okText="选择"
    @ok="handleChoose"
    @cancel="react"
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <!-- <a-col :md="4" :sm="24">
            <materialType-select v-model="queryParam.MaterialTypeId"></materialType-select>
          </a-col> -->
          <a-col :md="4" :sm="24">
            <a-form-item label="查询类别">
              <a-select allowClear v-model="queryParam.Condition">
                <a-select-option key="cInvCode">产品编码</a-select-option>
                <a-select-option key="cInvName">产品名称</a-select-option>

                <!-- <a-select-option key="cInvStd">规格型号</a-select-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input v-model="queryParam.Keyword" placeholder="关键字" />
            </a-form-item>
          </a-col>
          <a-radio-group default-value="0" v-model="queryParam.DelINVType" button-style="solid" @change="changeShow">
            <a-radio-button :value="0">销售订单</a-radio-button>
            <a-radio-button :value="1">返料申请</a-radio-button>
            <a-radio-button :value="2">样品申请</a-radio-button>
          </a-radio-group>

          <a-col :md="6" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.pagination.current = 1
                  this.getDataList()
                }
              "
              >查询</a-button
            >
            <a-button
              style="margin-left: 8px"
              @click="
                () => {
                  this.queryParam = { IsProduct: true, Condition: 'cInvName' }
                  this.sorter = {}
                  this.pagination.current = 1
                  this.queryParam.DelINVType = 0
                  this.getDataList()
                }
              "
              >重置</a-button
            >
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      :columns="columns"
      :scroll="{ y: scroll }"
      :rowKey="(row, index) => row + index"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        type: type,
        getCheckboxProps: Checkboxprops
      }"
      :bordered="true"
      size="small"
    >
      <template slot="ExpirationDate" slot-scope="text, record, index">
        <span>{{ text.substring(0, 10) }}</span>
      </template>

      <template slot="dataIndex" slot-scope="text, record, index">
        <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
      </template></a-table
    >
  </a-modal>
</template>

<script>
// import MaterialTypeSelect from './MaterialTypeSelect.vue'
// const columns = [
//   // { title: '备注', dataIndex: 'Remark', width: '10%' },
//   // { title: '价格表主表ID', dataIndex: 'MIdPriceList' },
//   // { title: '产品ID', dataIndex: 'ProductId' },
//   { title: '产品名称', dataIndex: 'cInvName' },
//   { title: '标准价格', dataIndex: 'StandardPrice' },
//   { title: '最低折扣', dataIndex: 'MinimumDiscount' },
//   { title: '数量下限1', dataIndex: 'NumLowerLimit1' },
//   { title: '下限价格1', dataIndex: 'LowerLimitPrice1' },
//   { title: '数量下限2', dataIndex: 'NumLowerLimit2' },
//   { title: '下限价格2', dataIndex: 'LowerLimitPrice2' },
//   { title: '数量下限3', dataIndex: 'NumLowerLimit3' },
//   { title: '下限价格3', dataIndex: 'LowerLimitPrice3' },
//   { title: '更新时间', dataIndex: 'UpdateTime' },
//   // {
//   //   title: '创建时间',
//   //   dataIndex: 'CreateTime',
//   //   width: '10%',
//   //   align: 'center',
//   //   scopedSlots: { customRender: 'CreateTime' }
//   // },
//   { title: '操作', dataIndex: 'action', align: 'left', scopedSlots: { customRender: 'action' } }
// ]
const columns = [
  // { title: '备注', dataIndex: 'Remark', width: '10%' },
  { title: '产品编码', dataIndex: 'cInvCode' },
  { title: '产品名称', dataIndex: 'cInvName' },
  { title: '规格型号', dataIndex: 'cInvStd' },
  { title: '单据号 ', dataIndex: 'OddNumbers' },
  { title: '待发数量 ', dataIndex: 'Quantity' },
  { title: '业务类型 ', dataIndex: 'OddType' }
  // { title: '零售单价 ', dataIndex: 'iInvSaleCost' },
  // { title: '采购员', dataIndex: 'cPurPersonCode' },

  // { title: '操作', dataIndex: 'action', align: 'left', scopedSlots: { customRender: 'action' } }
]
export default {
  props: {
    type: { type: String, default: 'checkbox', required: false },
    id: { type: String, required: false }
  },
  components: {
    // MaterialTypeSelect
  },
  mounted() {
    // this.getDataList()
  },
  computed: {
    scroll() {
      return Number(document.documentElement.clientHeight) * 0.5
    }
  },
  data() {
    return {
      data: [],
      listNum: [],
      qid: '',
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], //设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
      },
      filters: {},
      sorter: { field: 'cInvCode', order: 'desc' },
      loading: false,
      columns,
      queryParam: {
        DelINVType: 0,
        Condition: 'cInvName'
      },
      //IsProduct: true
      selectedRowKeys: [],
      selectedRows: [],
      visible: false
    }
  },
  methods: {
    Checkboxprops(row) {
      let a = this.listNum.map(item => {
        return `${item.OddNumbers}${item.cInvName}${item.OddType}`
      })
      var b = `${row.OddNumbers}${row.cInvName}${row.OddType}`

      var OddNumbers = a.includes(b)
      return {
        props: {
          disabled: OddNumbers
        }
      }
    },
    changeShow(e) {
      this.pagination.current = 1
      this.pagination.pageSize = 25
      this.queryParam.DelINVType = e.target.value
      this.getDataList()
    },
    //排序
    handleChange(value) {
      if (value == 'cInvName') this.sorter.field = 'cInvName'
      if (value == 'cInvCode') this.sorter.field = 'cInvCode'

      this.getDataList()
    },

    react() {
      this.visible = false
      this.queryParam = { IsProduct: true }
      this.pagination.current = 1
      this.pagination.pageSize = 25
    },
    handleTableChange(pagination, filters, sorter) {
      //console.log(pagination)
      this.pagination = { ...pagination }
      this.filters = { ...filters }

      this.getDataList()
    },
    getDataList() {
      this.loading = true

      this.$http
        .post('/ProductManagement/Inventory/GetDataListByCustIdAndOrderType', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'cInvCode',
          SortType: this.sorter.order,
          Search: {
            CustomerId: this.qid,
            DelINVType: this.queryParam.DelINVType,
            Condition: this.queryParam.Condition,
            Keyword: this.queryParam.Keyword
          }
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    openChoose(id, row) {
      this.selectedRowKeys = []
      this.qid = id
      this.queryParam.DelINVType = 0
      this.queryParam.Condition = 'cInvName'
      this.listNum = row

      this.getDataList()
      this.visible = true
    },
    handleChoose() {
      this.visible = false
      //console.log(this.selectedRows)
      this.$emit('onChoose', this.selectedRows)
      this.queryParam = { Condition: 'cInvName' }
      this.getDataList()
      this.pagination.current = 1
      this.pagination.pageSize = 25
    }
  }
}
</script>
